<template>
  <div>
    <el-card>
      型号搜索:
      <el-input
        placeholder="请输入"
        style="width: 200px; margin: 0 20px"
        v-model="params.innerCode"
        @change="changes"
      ></el-input>
      <el-button type="primary" @click="searchFn">查询</el-button>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
        <el-table-column prop="type.name" label="型号名称"> </el-table-column>
        <el-table-column prop="type.model" label="型号编码"> </el-table-column>
        <el-table-column label="设备图片" props="type.image"
          ><template #default="scope">
            <img
              :src="scope.row.type.image"
              alt=""
              class="img"
              style="width: 40px; border-radius: 50%"
            /> </template
        ></el-table-column>
        <el-table-column prop="type.vmRow" label="货道行"> </el-table-column>
        <el-table-column prop="type.vmCol" label="货道列"> </el-table-column>
        <el-table-column prop="type.channelMaxCapacity" label="设备容量">
        </el-table-column>
        <el-table-column prop="type.channelMaxCapacity" label="操作">
          <template #default="scope">
            <el-button type="text" @click="edit(scope.row)">修改</el-button>
            <el-button type="text" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改/ -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="600px"
      height="80%"
    >
      <el-form
        ref="formRef"
        label-width="120px"
        style="padding-right: 20px"
        :model="data"
      >
        <el-form-item label="型号名称：" prop="name">
          <el-input
            v-model="data.name"
            placeholder="请输入"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="型号编码：" prop="model">
          <el-input
            v-model="data.model"
            placeholder="请输入（限制数字、字母、中划线、下划线）"
            maxlength="15"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="货道行数：" prop="vmRow">
          <el-input-number
            v-model="data.vmRow"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="货道列数：" prop="vmCol">
          <el-input-number
            v-model="data.vmCol"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="货道容量：" prop="channelMaxCapacity">
          <el-input-number
            v-model="data.channelMaxCapacity"
            controls-position="right"
            :min="1"
            :max="10"
            placeholder="请输入"
            style="width: 100%"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="设备图片：" prop="image">
          <el-upload
            class="avatar-uploader"
            action="https://likede2-admin.itheima.net/likede/api/vm-service/sku/fileUpload"
            :show-file-list="false"
            name="fileName"
          >
            <img
              v-if="data.image"
              :src="data.image"
              class="avatar"
              style="width: 100px"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p class="listtype">支持扩展名:jpg、png,文件不得大于100kb</p>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSbList, getSblxDel, getSblxEdit } from "@/api/sbgl";
export default {
  data() {
    return {
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        status: "",
        innerCode: "",
      },
      data: [],
      dialogVisible: false,
      title: "修改设备类型",
    };
  },
  methods: {
    async getSbList() {
      const res = await getSbList(this.params);
      console.log(res.data.currentPageRecords);
      this.tableData = res.data.currentPageRecords;
    },
    searchFn() {
      this.getSbList();
    },
    changes() {
      this.getSbList();
    },
    edit(row) {
      this.data = row.type;
      this.dialogVisible = true;
      console.log(this.data);
    },
    async confirmFn() {
      await getSblxEdit(this.data, this.data.typeId);
      this.getSbList();
    },
    async del(row) {
      console.log(row.type.typeId);
      const res = await getSblxDel(row.type.typeId);
      console.log(res);
      this.getSbList();
    },
  },
  created() {
    this.getSbList();
  },
};
</script>

<style></style>
